<template>
	<div class="tabel_Background">
		<div class="tabel_Background-wra">
			<div v-show="type == 'craft'" id="echarts_2" style="width: 100%;height: 100%;"></div>
		</div>
	</div>
</template>

<script>
	import {
		getDepth,getDepthArea
	} from "@/api/index";
	export default {
		name: "DeepData",
		props: {
			title: String
		},
		data() {
			return {
				data: {
					wellname: "",
					yearstr: "",
					yearhalf: "",
					quarterid: "0",
					monthstr: "",
					craft: "",
					depth: "",
					deg: ""
				},
				data1: {
					wellname: "",
					yearstr: "",
					yearhalf: "",
					quarterid: "0",
					monthstr: "",
					craft: "",
					depth: "",
					deg: ""
				},
				total: 0,
				// depthInfor: [],
				type: "craft"
			};
		},
		mounted() {
			// if(sessionStorage.getItem("wellName")){
			// 	this.data.wellname = sessionStorage.getItem("wellName");
			// 	sessionStorage.removeItem("wellName");
			// };
			// if(sessionStorage.getItem("yearstr")){
			// 	this.data.yearstr = sessionStorage.getItem("yearstr");
			// 	sessionStorage.removeItem("yearstr");
			// };
			// this.getWellInfor(this.data);
			if(sessionStorage.getItem("wellName") || sessionStorage.getItem("yearstr")){
				if(!sessionStorage.getItem("wellName") && sessionStorage.getItem("yearstr")){
					this.data1.wellname = '';
					this.data1.yearstr = sessionStorage.getItem("yearstr");
				}else if(!sessionStorage.getItem("yearstr") && sessionStorage.getItem("wellName")){
					this.data1.wellname  = sessionStorage.getItem("wellName");
					this.data1.yearstr = '';
				}else if(sessionStorage.getItem("yearstr") && sessionStorage.getItem("wellName")){
					this.data1.wellname = sessionStorage.getItem("wellName");
					this.data1.yearstr = sessionStorage.getItem("yearstr");
				}
				// sessionStorage.removeItem("yearstr");
				// sessionStorage.removeItem("wellName");
				this.getDepthInfor(this.data1);
			}else if(sessionStorage.getItem("localtionData")){
				let localtionData1 = JSON.parse(sessionStorage.getItem("localtionData"));
				this.getWellAreaInfor(localtionData1);
				// sessionStorage.removeItem("localtionData");
			}else{
				this.getDepthInfor(this.data);
			};
			this.$bus.$on('analyzeChoose', content => {
				// console.log(content);
				this.data = content;
				this.getDepthInfor(this.data);
				
				// console.log(content)
			});
			// window.addEventListener("setItem", () => {
			// 	let data1 = JSON.parse(sessionStorage.getItem("data"));
			// 	if (this.data != data1 && data1 != null) {
			// 		this.data = data1;
			// 		// console.log(this.data);
			// 		this.depthInfor = [];
			// 		this.getDepthInfor();
			// 		console.log(this.depthInfor);
			// 	}

			// });
		},

		beforeDestroy() {
			this.$bus.$off('analyzeChoose');
			// 移除对 sessionStorage 的监听
			// window.removeEventListener("setItem", () => {});
			// sessionStorage.removeItem('data');
		},

		methods: {
			async getWellAreaInfor(val) {
				let  depthInfor1 = [];
				const {
					data: res
				} = await getDepthArea(val);
				// console.log(res.data);
				for (let i = 0; i < res.data.length; i++) {
					if (i == 0) {
						depthInfor1.push({
							name: "3000以下",
							value: res.data[i].data
						});
					} else if (i == 1) {
						depthInfor1.push({
							name: "3000~5000",
							value: res.data[i].data
						});
					} else if (i == 2) {
						depthInfor1.push({
							name: "5000~6000",
							value: res.data[i].data
						});
					} else if (i == 3) {
						depthInfor1.push({
							name: "6000~7000",
							value: res.data[i].data
						});
					} else if (i == 4) {
						depthInfor1.push({
							name: "7000以上",
							value: res.data[i].data
						});
					}
				}
				// console.log(depthInfor1);
				this.drawLine(depthInfor1);
			},
			
			async getDepthInfor(val) {
				let  depthInfor1 = [];
				const {
					data: res
				} = await getDepth(val);
				// console.log(res.data);
				for (let i = 0; i < res.data.length; i++) {
					if (i == 0) {
						depthInfor1.push({
							name: "3000以下",
							value: res.data[i].data
						});
					} else if (i == 1) {
						depthInfor1.push({
							name: "3000~5000",
							value: res.data[i].data
						});
					} else if (i == 2) {
						depthInfor1.push({
							name: "5000~6000",
							value: res.data[i].data
						});
					} else if (i == 3) {
						depthInfor1.push({
							name: "6000~7000",
							value: res.data[i].data
						});
					} else if (i == 4) {
						depthInfor1.push({
							name: "7000以上",
							value: res.data[i].data
						});
					}
				}
				// console.log(depthInfor1);
				this.drawLine(depthInfor1);
			},

			drawLine(depthInfor1) {
				var myChart = this.$echarts.init(document.getElementById("echarts_2"));
				let pieData = [];
				depthInfor1.forEach((item, index) => {
					if(item.value != 0){
						pieData.push({
							name: item.name,
							value: item.value
						});
					}
					
				});
				// console.log(pieData);
				let option = {
					title: {
						text: "井深",
						textStyle: {
							color: "#50cbfc",
							fontWeight: "normal"
						},
						// subtext: "Fake Data",
						left: "left"
					},
					color: ["#00c273", "#0097ff", "#34c9cf", "#0b40f2", "#5e4fe6"],
					// grid: { top: "10%", right: "5%", bottom: "10%", left: "5%" },
					// tooltip: {
					//   trigger: "item"
					// },
					tooltip: {
						trigger: "item",
						formatter: "{a} <br/>{b} : {c}" // "{a} <br/>{b} : {c} ({d}%)"
					},
					// legend: {
					//   orient: "vertical",
					//   left: "center"
					// },
					label: {
						color: "#fff",
						formatter: "{b}\n{d}%"
					},
					series: [{
						name: "井深",
						type: "pie",
						radius: ["25%", "65%"],
						center: ["50%", "50%"],
						data: pieData,
						emphasis: {
							itemStyle: {
								shadowBlur: 10,
								shadowOffsetX: 0,
								shadowColor: "rgba(0, 0, 0, 0.5)"
							}
						}
					}]
				};

				myChart.setOption(option);
				window.addEventListener("resize", function() {
					myChart.resize();
				});
			}
		}
	};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
	.tabel_Background {
		width: 30%; //3.02rem;
		height: 100%;
		margin-left: 1%;
		box-sizing: border-box;
	}

	.tabel_Background-wra {
		width: 100%; //3.02rem;
		height: 100%;
		// border: 1px solid rgb(12, 50, 107);
		background-image: url("../../assets/webqt/bg_5@2x.png");
		// background-image: url('./../../../assets/mobile/pre-share-page@2x.png');
		background-repeat: no-repeat;
		background-size: 100% 100%; // contain; // cover;
		padding: 2%;
		box-sizing: border-box;
	}

	.header-wra {
		display: flex;
		justify-content: space-between;
		width: 100%;
		height: 10%;
	}

	#title {
		width: 22%;
		height: 100%;
		min-width: 2.96rem;
		text-align: center;
		font-size: 6px;
		background-image: url("../../assets/title_outline@2x.png");
		background-repeat: no-repeat;
		background-size: 100% 100%; //cover;
		position: relative;
	}

	.title-text {
		position: absolute;
		left: 5%;
		top: 17%;
		color: #21beeb;
		font-weight: bold;
	}

	.type-wra {
		position: relative;
		width: 32%;
		z-index: 100;
	}

	.craft {
		float: left;
		text-align: center;
		width: 50%;
		height: 100%;
		// margin-left: 5%;
		font-size: 9px;
		line-height: 200%;
		color: #339ada;
		// background-image: url("../../assets/btn_leibie_pressed@2x.png");
		background-repeat: no-repeat;
		background-size: 100% 100%; //cover;
		cursor: pointer;
	}

	.craft:hover {
		background-image: url("../../assets/btn_leibie_pressed@2x.png");
	}

	.type {
		float: left;
		width: 50%;
		height: 100%;
		font-size: 9px;
		color: #339ada;
		line-height: 200%;
		color: #339ada;
		// background-image: url("../../assets/btn_leibie_normal@2x.png");
		background-repeat: no-repeat;
		background-size: 100% 100%; //cover;
		cursor: pointer;
	}

	.type:hover {
		background-image: url("../../assets/btn_leibie_pressed@2x.png");
	}

	.active-change {
		background-image: url("../../assets/btn_leibie_pressed@2x.png");
	}

	.no-active {
		background-image: url("../../assets/btn_leibie_normal@2x.png");
	}
</style>
